<template>
	<view class="mosk">
		<view class="mosk-box">
			<view class="close" @click="makeSure(1)"> × </view>
			<image :src="image" mode="" v-if="isShow"></image>
			<view class="mosk-box-text">
				<view> {{title}}</view>
				<view>
					<slot name="contentText"></slot>
				</view>
				<!-- 确认按钮 -->
				<view class="mosk-box-btn" v-if="typeBtn==2">
					<view @click="makeSure(2)" :class="active? 'active':'def'"> {{btnleft}} </view>
					<view @click="makeSure(3)" class="active"> {{btnRight}}</view>
				</view>
				<view class="mosk-box-sigin" v-if="typeBtn==1" @click="toKefu"> 联系客服 </view>
			</view>
		</view>
	</view>
</template>
<script>
	import phoneLimite from '@/libs/function/phoneLimite.js' //判断是否有拨打电话权限
	export default ({
		name: 'UniversalBox',
		props: {
			isShow: { //是否有头部icon
				type: Boolean,
				default: true,
			},
			image: { //头部展示图片
				type: String,
				default: 'https://images.linglinggong.net/jinggao.png',
			},
			title: { //弹框标题
				type: String,
				default: '评分过低警告',
			},
			btnleft: { //  左边按钮文本
				type: String,
				default: '查看评分',
			},
			btnRight: { //右边按钮文本
				type: String,
				default: '订单申诉',
			},
			active: { //左边按钮颜色
				type: Boolean,
				default: true,
			},
			typeBtn: {
				type: [String, Number],
				default: '2',
			}
		},
		data() {
			return {}
		},
		filters: {},
		methods: {
			// 联系客服
			toKefu() {
				phoneLimite(uni.getStorageSync('property_list_by_type').telephone)
			},
			// 抛出的事件
			makeSure(e) {
				console.log(e, 888)
				switch (e) {
					case 2: // 左边按钮
						this.$emit('onLeft');
						break;
					case 3: // 右边按钮
						this.$emit('onRight');
						break;
					default: //关闭按钮
						this.$emit('onClose')
						break;
				}
			},
		}
	})
</script>
<style scoped lang="scss">
	.mosk {
		position: fixed;
		top: 0;
		left: 0;
		height: 100vh;
		width: 100vw;
		display: grid;
		place-items: center;
		z-index: 99999;
		background: rgba(0, 0, 0, 0.2);

		&-box {
			width: 630rpx;
			padding: 40rpx 0;
			background: #FFF;
			border-radius: 24rpx;
			display: flex;
			flex-direction: column;
			align-items: center;

			.close {
				font-size: 45rpx;
				align-self: flex-end;
				margin-top: -35rpx;
				background: #fff;
				box-shadow: 1rpx 1rpx 12rpx #ddd;
				border-radius: 50%;
				flex-shrink: 0;
				width: 60rpx;
				height: 60rpx;
				text-align: center;
				line-height: 60rpx;
			}

			&>image {
				width: 80rpx;
				height: 80rpx;
			}

			&-text {
				text-align: center;

				&>view:nth-child(1) {
					font-size: 40rpx;
					font-weight: 800;
					color: #262626;
					margin-top: 40rpx;
				}

				&>view:nth-child(2) {
					font-size: 32rpx;
					display: flex;
					flex-direction: column;
					line-height: 1.5;
					word-wrap: break-word;
					width: 90%;
					margin: 60rpx auto 0;
					text-align: left;

					&>view {
						font-weight: 400;
						color: rgba(81, 81, 81, 1);
					}
				}
			}
		}
	}

	.mosk-box-btn {
		display: flex;
		justify-content: space-around;
		margin-top: 70rpx;
		width: 630rpx;

		&>view {
			width: 254rpx;
			height: 94rpx;
			border-radius: 12rpx;
			opacity: 1;
			text-align: center;
			font-size: 28rpx;
			font-weight: bold;
			line-height: 94rpx;
		}

		.def {
			color: #7F7F7F;
			background: #F1F1F5;
		}

		.active {
			background: #FCC92D;
			box-shadow: 0px 6px 12px 2px rgba(252, 201, 45, 0.3);
		}
	}

	.mosk-box-sigin {
		background: #FCC92D;
		box-shadow: 0px 6px 12px 2px rgba(252, 201, 45, 0.3);
		width: 80%;
		margin-top: 70rpx;
		height: 94rpx;
		text-align: center;
		line-height: 94rpx;
		border-radius: 12rpx;
		margin: 70rpx auto 0;
	}
</style>